<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="华为全球商店 - 了解华为的使命、发展历程、全球布局与创新理念，携手共创万物互联的智能世界">
    <meta name="keywords" content="华为,华为使命,华为发展历程,华为全球布局,华为研发">
    <title>关于我们 - HUAWEI Global Store</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f8fafc;
            color: #1f2937;
            overflow-x: hidden;
            line-height: 1.7;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 通用样式：按钮、标题、卡片 */
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid currentColor;
            transition: background 0.3s ease, color 0.3s ease;
        }

        .section-title {
            text-align: center;
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 40px;
            color: #1f2937;
            position: relative;
            padding-bottom: 12px;
        }

        .section-title::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #1d4ed8);
            border-radius: 2px;
        }

        .section-desc {
            max-width: 800px;
            margin: 0 auto 60px;
            text-align: center;
            color: #6b7280;
            font-size: 16px;
            line-height: 1.8;
        }

        .card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        /* Header 优化：统一导航风格，新增汉堡菜单 */
        .header {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            color: white;
            padding: 15px 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .logo {
            font-size: 28px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .logo:hover {
            transform: scale(1.05);
        }

        .logo::before {
            content: "🌐";
            font-size: 24px;
        }

        /* 汉堡菜单（移动端） */
        #hamburger {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            padding: 8px;
            border-radius: 6px;
            background: rgba(255,255,255,0.2);
            transition: background 0.3s ease;
            aria-label: "打开导航菜单";
        }

        #hamburger:hover {
            background: rgba(255,255,255,0.3);
        }

        .hamburger-line {
            width: 24px;
            height: 3px;
            background: white;
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        .nav {
            display: flex;
            gap: 30px;
            align-items: center;
        }

        .nav a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 8px 12px;
            border-radius: 8px;
            position: relative;
        }

        .nav a::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: white;
            transition: width 0.3s ease;
        }

        .nav a:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }

        .nav a:hover::after {
            width: 100%;
        }

        .nav a[href="about.html"] {
            background: rgba(255,255,255,0.25);
            font-weight: 600;
        }

        .user-actions {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .user-actions select {
            padding: 8px 12px;
            border-radius: 8px;
            border: none;
            background: white;
            font-size: 14px;
            cursor: pointer;
            transition: box-shadow 0.3s ease;
        }

        .user-actions select:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
        }

        /* 购物车图标：补充ID，优化交互 */
        #cartIcon {
            position: relative;
            padding: 10px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            aria-label: "打开购物车";
        }

        #cartIcon:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }

        .cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 禁用按钮样式（统一风格） */
        .disabled-btn {
            background: #e5e7eb !important;
            border-color: #d1d5db !important;
            color: #9ca3af !important;
            cursor: not-allowed !important;
            transform: none !important;
            box-shadow: none !important;
        }

        /* Hero区优化：聚焦品牌定位 */
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 60px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 42px;
            margin-bottom: 16px;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .hero p {
            font-size: 18px;
            margin-bottom: 0;
            opacity: 0.9;
        }

        /* 公司简介板块 */
        .company-intro {
            padding: 80px 0;
            background: white;
        }

        .intro-content {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .intro-text {
            font-size: 16px;
            color: #4b5563;
            line-height: 1.8;
        }

        .intro-highlights {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 24px;
            margin-top: 20px;
        }

        .highlight-card {
            padding: 24px;
            text-align: center;
        }

        .highlight-icon {
            font-size: 36px;
            color: #3b82f6;
            margin-bottom: 16px;
        }

        .highlight-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #1f2937;
        }

        .highlight-desc {
            color: #6b7280;
            font-size: 14px;
        }

        /* 发展历程时间轴 */
        .timeline-section {
            padding: 80px 0;
            background: #f8fafc;
        }

        .timeline {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

        .timeline::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            background: linear-gradient(180deg, #3b82f6, #1d4ed8);
            border-radius: 2px;
        }

        .timeline-item {
            margin-bottom: 48px;
            position: relative;
            width: 50%;
            padding: 0 30px;
        }

        .timeline-item:nth-child(odd) {
            left: 0;
            text-align: right;
        }

        .timeline-item:nth-child(even) {
            left: 50%;
            text-align: left;
        }

        .timeline-dot {
            position: absolute;
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: white;
            border: 4px solid #3b82f6;
            z-index: 1;
        }

        .timeline-item:nth-child(odd) .timeline-dot {
            right: -10px;
        }

        .timeline-item:nth-child(even) .timeline-dot {
            left: -10px;
        }

        .timeline-year {
            font-size: 14px;
            font-weight: 600;
            color: #3b82f6;
            margin-bottom: 8px;
        }

        .timeline-title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 8px;
        }

        .timeline-desc {
            color: #6b7280;
            font-size: 14px;
        }

        /* 全球布局板块 */
        .global-layout {
            padding: 80px 0;
            background: white;
        }

        .layout-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .layout-card {
            padding: 30px;
            text-align: center;
        }

        .layout-number {
            font-size: 48px;
            font-weight: 700;
            color: #3b82f6;
            margin-bottom: 12px;
            line-height: 1.2;
        }

        .layout-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #1f2937;
        }

        .layout-desc {
            color: #6b7280;
            font-size: 14px;
        }

        /* 研发与创新板块 */
        .rnd-section {
            padding: 80px 0;
            background: #f8fafc;
        }

        .rnd-content {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .rnd-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 24px;
        }

        .rnd-stat-card {
            padding: 24px;
            text-align: center;
        }

        .rnd-stat-value {
            font-size: 36px;
            font-weight: 700;
            color: #3b82f6;
            margin-bottom: 8px;
        }

        .rnd-stat-label {
            font-size: 16px;
            font-weight: 500;
            color: #1f2937;
            margin-bottom: 8px;
        }

        .rnd-stat-desc {
            color: #6b7280;
            font-size: 14px;
        }

        .rnd-progress {
            margin-top: 20px;
        }

        .progress-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #4b5563;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #3b82f6, #1d4ed8);
            border-radius: 4px;
            width: 15%; /* 研发投入占比（模拟数据） */
            transition: width 1s ease-in-out;
        }

        /* 企业价值观板块（优化样式） */
        .values-section {
            padding: 80px 0;
            background: white;
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .value-card {
            padding: 30px 24px;
            text-align: center;
        }

        .value-icon {
            font-size: 42px;
            color: #3b82f6;
            margin-bottom: 16px;
            transition: transform 0.3s ease;
        }

        .value-card:hover .value-icon {
            transform: scale(1.1);
        }

        .value-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #1f2937;
        }

        .value-desc {
            color: #6b7280;
            font-size: 14px;
            line-height: 1.6;
        }

        /* 可持续发展板块（新增） */
        .sustainability {
            padding: 80px 0;
            background: linear-gradient(135deg, #f8fafc, #eff6ff);
        }

        .sustain-content {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .sustain-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }

        .sustain-card {
            padding: 28px;
        }

        .sustain-icon {
            font-size: 36px;
            color: #10b981;
            margin-bottom: 16px;
        }

        .sustain-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #1f2937;
        }

        .sustain-desc {
            color: #6b7280;
            font-size: 14px;
            line-height: 1.6;
        }

        /* 登录模态框（补充，统一交互） */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            backdrop-filter: blur(5px);
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal.active {
            display: flex;
            opacity: 1;
        }

        .modal-content {
            background: white;
            padding: 36px;
            border-radius: 20px;
            text-align: center;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            transform: translateY(-20px);
            transition: transform 0.3s ease;
            position: relative;
        }

        .modal.active .modal-content {
            transform: translateY(0);
        }

        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: transparent;
            border: none;
            font-size: 24px;
            color: #6b7280;
            cursor: pointer;
            transition: color 0.3s ease;
            aria-label: "关闭登录窗口";
        }

        .modal-close:hover {
            color: #ef4444;
        }

        .modal-content h2 {
            font-size: 24px;
            margin-bottom: 24px;
            color: #1f2937;
        }

        .login-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .form-group {
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #1f2937;
        }

        .form-group input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        /* Footer 优化：统一链接交互 */
        .footer {
            background: #1f2937;
            color: white;
            padding: 50px 0 24px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 32px;
            margin-bottom: 32px;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .footer-section h3 {
            margin-bottom: 18px;
            font-size: 18px;
            position: relative;
            padding-bottom: 8px;
        }

        .footer-section h3::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background: #3b82f6;
            border-radius: 1px;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section li {
            margin-bottom: 12px;
        }

        .footer-section a {
            color: #9ca3af;
            text-decoration: none;
            transition: color 0.3s ease, padding-left 0.3s ease;
            display: inline-block;
        }

        .footer-section a:hover {
            color: white;
            padding-left: 4px;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 24px;
            border-top: 1px solid #374151;
            color: #9ca3af;
            font-size: 14px;
        }

        /* 响应式优化：适配移动端 */
        @media (max-width: 768px) {
            /* 汉堡菜单显示 */
            #hamburger {
                display: flex;
            }
            
            /* 导航栏折叠 */
            .nav {
                display: none;
                position: absolute;
                top: 75px;
                left: 0;
                right: 0;
                background: #1e40af;
                flex-direction: column;
                gap: 12px;
                padding: 20px;
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
                z-index: 999;
            }
            
            .nav.active {
                display: flex;
            }
            
            /* 汉堡菜单图标切换 */
            #hamburger.active .hamburger-line:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }
            #hamburger.active .hamburger-line:nth-child(2) {
                opacity: 0;
            }
            #hamburger.active .hamburger-line:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -5px);
            }
            
            /* Hero区适配 */
            .hero h1 {
                font-size: 32px;
            }
            
            .hero p {
                font-size: 16px;
            }
            
            /* 时间轴适配（移动端改为垂直） */
            .timeline::before {
                left: 20px;
                transform: none;
            }
            
            .timeline-item {
                width: 100%;
                left: 0 !important;
                text-align: left !important;
                padding-left: 50px;
                padding-right: 0;
            }
            
            .timeline-item .timeline-dot {
                left: 10px !important;
                right: auto !important;
            }
            
            /* 板块标题适配 */
            .section-title {
                font-size: 28px;
            }
            
            /* 卡片布局适配（移动端1列） */
            .intro-highlights,
            .layout-grid,
            .rnd-stats,
            .values-grid,
            .sustain-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 动画效果：提升交互感 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 页面加载动画：延迟触发各板块 */
        .company-intro, .timeline-section, .global-layout, .rnd-section, .values-section, .sustainability {
            animation: fadeIn 0.6s ease-out;
        }

        .timeline-item {
            animation: fadeIn 0.4s ease-out;
            animation-fill-mode: both;
        }

        .timeline-item:nth-child(1) { animation-delay: 0.1s; }
        .timeline-item:nth-child(2) { animation-delay: 0.2s; }
        .timeline-item:nth-child(3) { animation-delay: 0.3s; }
        .timeline-item:nth-child(4) { animation-delay: 0.4s; }
    </style>
</head>
<body>
    <!-- Header（统一导航，含汉堡菜单） -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo" onclick="window.location.href='index.html'">HUAWEI Global Store</div>
                
                <!-- 汉堡菜单（移动端） -->
                <div id="hamburger" aria-expanded="false">
                    <div class="hamburger-line"></div>
                    <div class="hamburger-line"></div>
                    <div class="hamburger-line"></div>
                </div>
                
                <!-- 导航栏（当前页高亮） -->
                <nav class="nav">
                    <a href="index.html">首页</a>
                    <a href="product-list.html">新品</a>
                    <a href="support.html">支持</a>
                    <a href="about.html" aria-current="page">关于</a>
                </nav>
                
                <div class="user-actions">
                    <select>
                        <option>🇨🇳 中文</option>
                        <option>🇺🇸 English</option>
                        <option>🇯🇵 日本語</option>
                        <option>🇩🇪 Deutsch</option>
                    </select>
                    
                    <!-- 购物车（绑定事件，跳转cart.html） -->
                    <div id="cartIcon" aria-label="购物车">
                        🛒
                        <div class="cart-count" id="cartCount">0</div>
                    </div>
                    
                    <!-- 登录/个人中心按钮（跳转login.html） -->
                    <button id="loginBtn" class="btn btn-outline" style="color: white; border-color: white;">
                        登录
                    </button>
                    <button id="profileBtn" class="btn btn-outline" style="color: white; border-color: white;">
                        个人中心
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero区（聚焦品牌使命） -->
    <section class="hero">
        <div class="container hero-content">
            <h1>关于华为</h1>
            <p>自1987年成立以来，华为始终致力于为客户创造价值，通过技术创新推动行业发展，携手全球伙伴共创万物互联的智能世界</p>
        </div>
    </section>

    <!-- 公司简介（核心信息） -->
    <section class="company-intro">
        <div class="container">
            <h2 class="section-title">公司简介</h2>
            <p class="section-desc">华为是全球领先的ICT（信息与通信）基础设施和智能终端提供商，业务遍及170多个国家和地区，服务全球超过30亿人口。</p>
            
            <div class="intro-content">
                <p class="intro-text">
                    华为创立于1987年，总部位于中国深圳。我们坚持以客户为中心，聚焦ICT领域，围绕运营商、企业、终端和云计算四大业务板块，提供从芯片、设备到解决方案的全栈产品与服务。通过持续的技术创新和研发投入，华为在5G、人工智能、云计算、智能终端等领域建立了领先优势，致力于成为数字世界的构建者，推动产业数字化转型。
                </p>
                
                <div class="intro-highlights">
                    <div class="highlight-card card">
                        <div class="highlight-icon">🏢</div>
                        <h3 class="highlight-title">成立时间</h3>
                        <p class="highlight-desc">1987年，由任正非先生创立</p>
                    </div>
                    <div class="highlight-card card">
                        <div class="highlight-icon">🌐</div>
                        <h3 class="highlight-title">全球总部</h3>
                        <p class="highlight-desc">中国·深圳</p>
                    </div>
                    <div class="highlight-card card">
                        <div class="highlight-icon">👥</div>
                        <h3 class="highlight-title">全球员工</h3>
                        <p class="highlight-desc">约19万名，来自170多个国家</p>
                    </div>
                    <div class="highlight-card card">
                        <div class="highlight-icon">💡</div>
                        <h3 class="highlight-title">核心战略</h3>
                        <p class="highlight-desc">以消费者为中心，聚焦主航道业务</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 发展历程（时间轴） -->
    <section class="timeline-section">
        <div class="container">
            <h2 class="section-title">发展历程</h2>
            <p class="section-desc">从本土企业到全球ICT领导者，华为的每一步都离不开对技术创新的坚持和对客户需求的洞察。</p>
            
            <div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">1987年</div>
                    <div class="timeline-title">华为正式成立</div>
                    <div class="timeline-desc">在深圳注册成立，初期聚焦电信设备代理业务，逐步开启自主研发之路。</div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">1996年</div>
                    <div class="timeline-title">进入国际市场</div>
                    <div class="timeline-desc">首次进入俄罗斯市场，开启全球化布局，随后逐步拓展至东南亚、欧洲等地区。</div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2009年</div>
                    <div class="timeline-title">启动5G研发</div>
                    <div class="timeline-desc">率先投入5G技术研发，参与全球5G标准制定，成为5G领域的主要贡献者。</div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2018年</div>
                    <div class="timeline-title">智能手机出货量全球第二</div>
                    <div class="timeline-desc">华为手机业务快速增长，出货量超越苹果，成为全球第二大智能手机厂商。</div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2022年</div>
                    <div class="timeline-title">发布HarmonyOS 3.0</div>
                    <div class="timeline-desc">推出面向全场景的分布式操作系统，连接手机、平板、手表、智能家居等设备，构建万物互联生态。</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 全球布局（数据可视化） -->
    <section class="global-layout">
        <div class="container">
            <h2 class="section-title">全球布局</h2>
            <p class="section-desc">华为的业务遍及全球，通过本地化运营和合作伙伴生态，为不同地区的客户提供定制化解决方案。</p>
            
            <div class="layout-grid">
                <div class="layout-card card">
                    <div class="layout-number">170+</div>
                    <div class="layout-title">业务覆盖国家/地区</div>
                    <div class="layout-desc">从亚洲到非洲，从欧洲到美洲，华为的产品和服务已深入全球主要市场。</div>
                </div>
                
                <div class="layout-card card">
                    <div class="layout-number">45+</div>
                    <div class="layout-title">全球研发中心</div>
                    <div class="layout-desc">在德国、美国、俄罗斯、印度等国家设立研发中心，吸引全球顶尖科技人才。</div>
                </div>
                
                <div class="layout-card card">
                    <div class="layout-number">30亿+</div>
                    <div class="layout-title">服务人口</div>
                    <div class="layout-desc">为全球超过30亿用户提供通信网络服务，助力数字基础设施建设。</div>
                </div>
                
                <div class="layout-card card">
                    <div class="layout-number">900+</div>
                    <div class="layout-title">全球合作伙伴</div>
                    <div class="layout-desc">与运营商、企业客户、开发者建立深度合作，共同推动产业生态发展。</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 研发与创新（研发数据） -->
    <section class="rnd-section">
        <div class="container">
            <h2 class="section-title">研发与创新</h2>
            <p class="section-desc">华为坚信“技术是企业的生存之本”，每年将超过15%的销售收入投入研发，持续推动技术突破。</p>
            
            <div class="rnd-content">
                <div class="rnd-stats">
                    <div class="rnd-stat-card card">
                        <div class="rnd-stat-value">15%</div>
                        <div class="rnd-stat-label">研发投入占比</div>
                        <div class="rnd-stat-desc">近十年累计研发投入超9000亿元人民币</div>
                    </div>
                    
                    <div class="rnd-stat-card card">
                        <div class="rnd-stat-value">12万+</div>
                        <div class="rnd-stat-label">研发人员</div>
                        <div class="rnd-stat-desc">占公司总人数的60%以上，全球顶尖工程师团队</div>
                    </div>
                    
                    <div class="rnd-stat-card card">
                        <div class="rnd-stat-value">9.7万+</div>
                        <div class="rnd-stat-label">全球授权专利</div>
                        <div class="rnd-stat-desc">其中5G标准必要专利数量全球领先</div>
                    </div>
                </div>
                
                <div class="rnd-progress card">
                    <div class="progress-label">
                        <span>研发投入占销售收入比例</span>
                        <span>15%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill"></div>
                    </div>
                    <p style="margin-top: 12px; font-size: 14px; color: #6b7280;">
                        华为承诺未来五年（2023-2027）研发投入将超过5000亿元人民币，聚焦5G-A、人工智能、云计算等前沿领域。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 企业价值观 -->
    <section class="values-section">
        <div class="container">
            <h2 class="section-title">企业价值观</h2>
            <p class="section-desc">价值观是华为发展的基石，指引我们与客户、伙伴、员工共同成长。</p>
            
            <div class="values-grid">
                <div class="value-card card">
                    <div class="value-icon">💡</div>
                    <h3 class="value-title">持续创新</h3>
                    <p class="value-desc">以客户需求为导向，通过技术创新和管理创新，不断提升产品与服务质量，为客户创造更大价值。</p>
                </div>
                
                <div class="value-card card">
                    <div class="value-icon">🌱</div>
                    <h3 class="value-title">可持续发展</h3>
                    <p class="value-desc">将绿色环保理念融入产品设计、生产和运营，推动低碳技术应用，助力全球实现“双碳”目标。</p>
                </div>
                
                <div class="value-card card">
                    <div class="value-icon">🤝</div>
                    <h3 class="value-title">合作共赢</h3>
                    <p class="value-desc">开放包容，与产业链伙伴共建生态，共享技术成果，共同推动行业进步，实现多方共赢。</p>
                </div>
                
                <div class="value-card card">
                    <div class="value-icon">🌍</div>
                    <h3 class="value-title">全球责任</h3>
                    <p class="value-desc">尊重不同国家的文化与法律，履行企业社会责任，参与公益事业，为当地社区发展贡献力量。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 可持续发展 -->
    <section class="sustainability">
        <div class="container">
            <h2 class="section-title">可持续发展</h2>
            <p class="section-desc">华为将可持续发展融入业务战略，致力于通过技术创新推动环境、社会与治理（ESG）目标的实现。</p>
            
            <div class="sustain-content">
                <div class="sustain-grid">
                    <div class="sustain-card card">
                        <div class="sustain-icon">🌿</div>
                        <h3 class="sustain-title">绿色运营</h3>
                        <p class="sustain-desc">推行绿色生产、绿色办公，减少碳排放。华为全球办公园区100%使用可再生能源，产品能效达到行业领先水平。</p>
                    </div>
                    
                    <div class="sustain-card card">
                        <div class="sustain-icon">📱</div>
                        <h3 class="sustain-title">绿色产品</h3>
                        <p class="sustain-desc">从设计、生产到回收，全生命周期降低环境影响。手机、笔记本等产品采用可回收材料，支持快充与低功耗技术。</p>
                    </div>
                    
                    <div class="sustain-card card">
                        <div class="sustain-icon">🤝</div>
                        <h3 class="sustain-title">社会公益</h3>
                        <p class="sustain-desc">发起“华为ICT学院”项目，培养全球数字人才；参与灾害救援，提供通信设备支持；推动乡村教育数字化。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer（统一链接交互） -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>产品与服务</h3>
                    <ul>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">平板</a></li>
                        <li><a href="#">笔记本</a></li>
                        <li><a href="#">穿戴设备</a></li>
                        <li><a href="#">智能家居</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>客户服务</h3>
                    <ul>
                        <li><a href="support.html">售后服务</a></li>
                        <li><a href="#">保修政策</a></li>
                        <li><a href="#">用户手册</a></li>
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">投诉建议</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>关于华为</h3>
                    <ul>
                        <li><a href="about.html">公司简介</a></li>
                        <li><a href="#">新闻中心</a></li>
                        <li><a href="#">投资者关系</a></li>
                        <li><a href="#">可持续发展</a></li>
                        <li><a href="#">加入我们</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>全球站点</h3>
                    <ul>
                        <li><a href="#">🇨🇳 中国大陆</a></li>
                        <li><a href="#">🇺🇸 United States</a></li>
                        <li><a href="#">🇪🇺 Europe</a></li>
                        <li><a href="#">🇯🇵 日本</a></li>
                        <li><a href="#">🇰🇷 韩国</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 华为技术有限公司 版权所有 | <a href="#" style="color: #9ca3af;">隐私政策</a> | <a href="#" style="color: #9ca3af;">使用条款</a> | <a href="#" style="color: #9ca3af;">网站地图</a></p>
            </div>
        </div>
    </footer>

    <script>
        // 1. 缓存DOM元素（提升性能）
        const $cartIcon = document.getElementById('cartIcon');
        const $cartCount = document.getElementById('cartCount');
        const $loginBtn = document.getElementById('loginBtn');
        const $profileBtn = document.getElementById('profileBtn');
        const $hamburger = document.getElementById('hamburger');
        const $nav = document.querySelector('.nav');
        const $progressFill = document.querySelector('.progress-fill');

        // 2. localStorage操作封装（规范逻辑）
        const Storage = {
            // 登录状态
            getIsLoggedIn: () => localStorage.getItem('isLoggedIn') === 'true',
            setIsLoggedIn: (value) => localStorage.setItem('isLoggedIn', value),
            // 购物车数量
            getCartCount: () => parseInt(localStorage.getItem('cartItems')) || 0,
            setCartCount: (count) => localStorage.setItem('cartItems', count),
            // 缓存清理时间
            getLastClear: () => parseInt(localStorage.getItem('lastClear')) || 0,
            setLastClear: (time) => localStorage.setItem('lastClear', time),
            // 清除数据
            clearCart: () => localStorage.removeItem('cartItems'),
            clearLogin: () => localStorage.removeItem('isLoggedIn')
        };

        // 3. 自动清缓存（24小时周期）
        function autoClearCache() {
            const now = Date.now();
            const cacheExpire = 24 * 60 * 60 * 1000; // 24小时
            const lastClear = Storage.getLastClear();

            if (now - lastClear > cacheExpire) {
                console.log('🧹 自动清理缓存：超过24小时');
                Storage.clearCart();
                Storage.clearLogin();
                Storage.setLastClear(now);
                $cartCount.textContent = 0;
                updateLoginState();
            }
        }

        // 4. 登录状态更新（UI同步）
        function updateLoginState() {
            const isLoggedIn = Storage.getIsLoggedIn();

            // 登录按钮状态
            if (isLoggedIn) {
                $loginBtn.disabled = true;
                $loginBtn.classList.add('disabled-btn');
                $loginBtn.textContent = '已登录';
                $profileBtn.disabled = false;
                $profileBtn.classList.remove('disabled-btn');
            } else {
                $loginBtn.disabled = false;
                $loginBtn.classList.remove('disabled-btn');
                $loginBtn.textContent = '登录';
                $profileBtn.disabled = true;
                $profileBtn.classList.add('disabled-btn');
                $profileBtn.textContent = '个人中心';
                // 未登录清空购物车显示
                Storage.clearCart();
                $cartCount.textContent = 0;
            }
        }

        // 5. 购物车点击事件（核心逻辑：登录→cart.html，未登录→login.html）
        function handleCartClick() {
            if (Storage.getIsLoggedIn()) {
                // 登录后跳转购物车页面
                window.location.href = 'cart.html';
            } else {
                // 未登录跳转登录页面
                alert('请先登录才能使用购物车功能');
                window.location.href = 'login.html';
            }
        }

        // 6. 登录按钮点击事件（跳转login.html）
        function handleLoginClick() {
            if (Storage.getIsLoggedIn()) {
                alert('您已登录，无需重复操作');
                return;
            }
            window.location.href = 'login.html';
        }

        // 7. 个人中心点击事件（登录→user-center.html，未登录→login.html）
        function handleProfileClick() {
            if (Storage.getIsLoggedIn()) {
                window.location.href = 'user-center.html';
            } else {
                alert('请先登录才能进入个人中心');
                window.location.href = 'login.html';
            }
        }

        // 8. 移动端汉堡菜单切换
        function toggleHamburger() {
            $nav.classList.toggle('active');
            const isActive = $nav.classList.contains('active');
            $hamburger.setAttribute('aria-expanded', isActive);
            // 菜单激活时禁止页面滚动
            document.body.style.overflow = isActive ? 'hidden' : '';
        }

        // 9. 页面加载初始化
        window.addEventListener('load', function() {
            // 初始化登录状态
            updateLoginState();
            // 初始化购物车数量
            $cartCount.textContent = Storage.getCartCount();
            // 研发进度条动画
            setTimeout(() => $progressFill.style.width = '15%', 300);
            // 绑定事件
            $cartIcon.addEventListener('click', handleCartClick);
            $loginBtn.addEventListener('click', handleLoginClick);
            $profileBtn.addEventListener('click', handleProfileClick);
            $hamburger.addEventListener('click', toggleHamburger);
            // 自动清缓存检查
            autoClearCache();
            // 每小时检查一次缓存
            setInterval(autoClearCache, 60 * 60 * 1000);
        });
    </script>
</body>
</html>